<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import logo from '@/assets/logo.png'

// 定义报价单中的商品项接口
interface QuotationItem {
  id: number
  name: string  // 名称
  specification: string  // 规格型号
  quantity: number  // 数量
  unit: string  // 单位
  unitPrice: number  // 单价
  totalPrice: number  // 小计
  remarks?: string  // 备注
}

// 定义客户信息接口
interface CustomerInfo {
  companyName: string  // 公司名称
  contactName: string  // 联系人
  contactPhone: string  // 联系电话
  address: string  // 地址
  fax: string  // 传真
  email: string  // 邮箱
}

// 定义公司信息接口
interface CompanyInfo {
  companyName: string  // 公司名称
  contactName: string  // 联系人
  contactPhone: string  // 联系电话
  address: string  // 地址
  fax: string  // 传真
  email: string  // 邮箱
}

// 定义报价条款接口
interface QuotationTerms {
  paymentTerms: string  // 付款方式
  validityPeriod: string  // 报价有效期
  deliveryMethod: string  // 交货方式
  deliveryPeriod: string  // 交货周期
  otherTerms?: string  // 其他条款
}

// 定义报价单接口
interface QuotationData {
  quotationNumber: string  // 报价单号
  date: string  // 日期
  customerInfo: CustomerInfo  // 客户信息
  companyInfo: CompanyInfo  // 公司信息
  items: QuotationItem[]  // 商品项列表
  packagingCost: number  // 包装费
  transportationCost: number  // 运输费
  installationCost: number  // 安装费
  totalAmount: number  // 总计金额
  quotationTerms: QuotationTerms  // 报价条款
  note: string  // 货物简要描述
}

// 创建报价单数据示例
const quotationData = reactive<QuotationData>({
  quotationNumber: 'NO.1',
  date: new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '/'),
  customerInfo: {
    companyName: '富里和美包装股份有限公司',
    contactName: '',
    contactPhone: '',
    address: '',
    fax: '',
    email: ''
  },
  companyInfo: {
    companyName: '浙江中扬立库技术有限公司',
    contactName: '童春辉',
    contactPhone: '18702172783',
    address: '浙江省嘉兴市嘉善县滨江路 158号',
    fax: '',
    email: ''
  },
  items: [
    {
      id: 1,
      name: '模块化围挡平台',
      specification: '50000*100000*4000',
      quantity: 5000,
      unit: '平方米',
      unitPrice: 900,
      totalPrice: 4500000,
      remarks: ''
    },
    {
      id: 2,
      name: '运输',
      specification: '',
      quantity: 1,
      unit: '项',
      unitPrice: 10000,
      totalPrice: 10000,
      remarks: ''
    },
    {
      id: 3,
      name: '安装费',
      specification: '',
      quantity: 1,
      unit: '项',
      unitPrice: 20000,
      totalPrice: 20000,
      remarks: ''
    }
  ],
  packagingCost: 0,
  transportationCost: 0,
  installationCost: 0,
  totalAmount: 0,
  quotationTerms: {
    paymentTerms: '预付40%，全部到货验收后30天内付20%',
    validityPeriod: '甲方公司盖章后1年',
    deliveryMethod: '根据甲方要求送至指定地点',
    deliveryPeriod: '3天',
    otherTerms: ''
  },
  note: '货物简要描述：'
})

// 计算总金额
const calculateTotal = computed(() => {
  const itemsTotal = quotationData.items.reduce((total, item) => total + item.totalPrice, 0)
  return itemsTotal
})

// 格式化金额为大写
const convertToChinese = (money: number) => {
  if (money === 0) {
    return '零元整'
  }
  
  const fraction = ['角', '分']
  const digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
  const unit = [
    ['元', '万', '亿'],
    ['', '拾', '佰', '仟']
  ]
  const head = money < 0 ? '负' : ''
  
  money = Math.abs(money)
  
  let s = ''
  
  for (let i = 0; i < fraction.length; i++) {
    s += (digit[Math.floor(money * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '')
  }
  
  s = s || '整'
  
  money = Math.floor(money)
  
  for (let i = 0; i < unit[0].length && money > 0; i++) {
    let p = ''
    for (let j = 0; j < unit[1].length && money > 0; j++) {
      p = digit[money % 10] + unit[1][j] + p
      money = Math.floor(money / 10)
    }
    s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s
  }
  
  return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整')
}

// 打印方法
const printQuotation = () => {
  window.print()
}

// 计算总额大写
const totalAmountInChinese = computed(() => {
  return convertToChinese(calculateTotal.value)
})
</script>

<template>
  <div class="quotation-page">
    <div class="quotation-actions">
      <el-button type="primary" @click="printQuotation">打印报价单</el-button>
    </div>
    
    <div class="quotation-container" id="quotationContent">
      <!-- 表头 -->
      <div class="quotation-header">
        <div class="company-logo">
          <img :src="logo" alt="公司logo" class="logo-image">
        </div>
        <div class="company-title">
          {{ quotationData.companyInfo.companyName }}
        </div>
        <div class="document-title">
          报价单
        </div>
        <div class="document-info">
          <div class="document-number">NO.{{ quotationData.quotationNumber }}</div>
          <div class="document-date">日期：{{ quotationData.date }}</div>
        </div>
      </div>
      
      <!-- 公司认证信息 -->
      <div class="certification-info">
        本公司专业生产制造现代仓储物流系统设备，已通过ISO9001质量体系认证、环境管理体系ISO14001
      </div>
      
      <!-- 客户与公司信息 -->
      <div class="info-section">
        <table class="info-table" border="1" cellspacing="0" cellpadding="0">
          <tr>
            <td class="label">客户名称：</td>
            <td class="value">{{ quotationData.customerInfo.companyName }}</td>
            <td class="label">公司：</td>
            <td class="value">{{ quotationData.companyInfo.companyName }}</td>
          </tr>
          <tr>
            <td class="label">联系人：</td>
            <td class="value">{{ quotationData.customerInfo.contactName }}</td>
            <td class="label">联系人：</td>
            <td class="value">{{ quotationData.companyInfo.contactName }}</td>
          </tr>
          <tr>
            <td class="label">联系方式：</td>
            <td class="value">{{ quotationData.customerInfo.contactPhone }}</td>
            <td class="label">联系方式：</td>
            <td class="value">{{ quotationData.companyInfo.contactPhone }}</td>
          </tr>
          <tr>
            <td class="label">地址：</td>
            <td class="value">{{ quotationData.customerInfo.address }}</td>
            <td class="label">地址：</td>
            <td class="value">{{ quotationData.companyInfo.address }}</td>
          </tr>
          <tr>
            <td class="label">传真：</td>
            <td class="value">{{ quotationData.customerInfo.fax }}</td>
            <td class="label">传真：</td>
            <td class="value">{{ quotationData.companyInfo.fax }}</td>
          </tr>
          <tr>
            <td class="label">邮箱：</td>
            <td class="value">{{ quotationData.customerInfo.email }}</td>
            <td class="label">邮箱：</td>
            <td class="value">{{ quotationData.companyInfo.email }}</td>
          </tr>
        </table>
      </div>
      
      <!-- 备注区域 -->
      <div class="note-section">
        <div class="note-label">备注</div>
        <div class="note-content">
          <div class="note-row">
            <div class="note-title">货物参数：</div>
          </div>
          <div class="note-row">
            <div class="note-title">货物简要描述：</div>
          </div>
        </div>
      </div>
      
      <!-- 商品清单 -->
      <div class="items-section">
        <table class="items-table" border="1" cellspacing="0" cellpadding="0">
          <thead>
            <tr>
              <th>序号</th>
              <th>名称</th>
              <th>规格型号</th>
              <th>数量</th>
              <th>单位</th>
              <th>单价</th>
              <th>小计</th>
              <th>备注</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in quotationData.items" :key="item.id">
              <td>{{ index + 1 }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.specification }}</td>
              <td>{{ item.quantity }}</td>
              <td>{{ item.unit }}</td>
              <td>¥ {{ item.unitPrice.toFixed(2) }}</td>
              <td>{{ item.totalPrice.toFixed(2) }}</td>
              <td>{{ item.remarks }}</td>
            </tr>
            <tr class="total-row">
              <td colspan="2" class="text-right">总计大写：</td>
              <td colspan="3">{{ totalAmountInChinese }}</td>
              <td>总计金额：</td>
              <td colspan="2">¥{{ calculateTotal.toLocaleString() }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <!-- 报价条款 -->
      <div class="terms-section">
        <ol class="terms-list">
          <li>以上价格仔细研读后指导使用：如GB/E9018-2016，通服价格～235（N/㎡²）抗拉～205（N/㎡²）伸长率31％</li>
          <li>材质标准：Q355/Q235。强度标准：GB/E9018-2016；通服价格～300（N/㎡²）抗拉～255（N/㎡²）伸张～175（N/㎡²）</li>
          <li>表面处理：酸洗磷化，后采用防腐环氧树脂涂装表面电泳，执行标准：GB 15607-2008</li>
          <li>焊接标准：焊接标准：抗拉～300（N/㎡²）抗拉～255（N/㎡²）伸张～175（N/㎡²）</li>
          <li>制造执行标准：CBE323-90(架架设计规范)，Jb/T5323-1991 (钢焊架技术条件)，GB/E5001-7-2003 （高位仓库架设计标准），GBT 30675-2014 （钢焊架安装）</li>
          <li>报价有效期限：由于材料价格波动比较大，此报价有效期限：3天。</li>
          <li>材料供应商：宝钢 日照钢铁 鞍钢 首钢及国内大型钢厂</li>
          <li>保修期：非人为因素保修1年</li>
          <li>付款方式：预付40%，全部到货验收后30天内付20%。</li>
          <li>以上报价不含安装服务费，如需加速度:0.05g。</li>
        </ol>
        <div class="terms-note">
          注：付款方式为转账；如果采用银行承兑汇票支付，5%财务费用（半年期），乙方不接受商业汇票。
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.quotation-page {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.quotation-actions {
  margin-bottom: 20px;
  text-align: center;
  
  @media print {
    display: none;
  }
}

.quotation-container {
  background-color: white;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid #dcdfe6;
}

.quotation-header {
  position: relative;
  text-align: center;
  margin-bottom: 15px;
  
  .company-logo {
    position: absolute;
    top: 0;
    right: 0;
    
    .logo-image {
      height: 40px;
      width: auto;
    }
  }
  
  .company-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .document-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .document-info {
    display: flex;
    justify-content: space-between;
    
    .document-number {
      font-weight: bold;
    }
  }
}

.certification-info {
  text-align: center;
  color: #e41e2b;
  font-size: 14px;
  margin-bottom: 15px;
  border-bottom: 1px solid #dcdfe6;
  padding-bottom: 10px;
}

.info-section {
  margin-bottom: 15px;
  
  .info-table {
    width: 100%;
    border-collapse: collapse;
    
    td {
      padding: 8px;
      border: 1px solid #000;
      
      &.label {
        width: 15%;
        text-align: right;
        font-weight: bold;
      }
      
      &.value {
        width: 35%;
      }
    }
  }
}

.note-section {
  margin-bottom: 15px;
  
  .note-label {
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  .note-content {
    border: 1px solid #000;
    padding: 10px;
    
    .note-row {
      display: flex;
      margin-bottom: 10px;
      
      .note-title {
        font-weight: bold;
        width: 150px;
      }
    }
  }
}

.items-section {
  margin-bottom: 15px;
  
  .items-table {
    width: 100%;
    border-collapse: collapse;
    
    th, td {
      padding: 8px;
      border: 1px solid #000;
      text-align: center;
    }
    
    thead {
      background-color: #f0f0f0;
      
      th {
        font-weight: bold;
      }
    }
    
    .total-row {
      background-color: #f0f0f0;
      font-weight: bold;
      
      .text-right {
        text-align: right;
      }
    }
  }
}

.terms-section {
  .terms-list {
    margin-left: 20px;
    padding-left: 0;
    
    li {
      margin-bottom: 5px;
      font-size: 14px;
    }
  }
  
  .terms-note {
    margin-top: 10px;
    font-size: 14px;
  }
}

@media print {
  .quotation-page {
    padding: 0;
    background-color: white;
  }
  
  .quotation-container {
    box-shadow: none;
    max-width: 100%;
    padding: 0;
    border: none;
  }
}
</style> 